<script setup lang="tsx">
import { ref } from "vue";
import { Icon } from "@iconify/vue"
import type { MenuMixedOptions } from "@/router/helper";
import router from "../../router";

defineProps({ 
    item: { 
        type: Object as () => MenuMixedOptions, 
        default: () => ({}) 
    } 
})
function handleClick(item: MenuMixedOptions) {
    if (item?.component) {
        // 使用item.path而不是item.componentName来构建正确的路由路径
        // 确保路径格式正确，不以/开头的添加/前缀
        const path = item.path.startsWith('/') ? item.path : `/${item.path}`;
        router.push({ path });
    }
}
</script>
<template>
    <div class="flex flex-col bg-white p-2 rounded shadow" style="width: 300px; height: 130px;">
        <div class="flex flex-1 min-h-0">
            <Icon class="bg-white" style="font-size:36px" :icon="item.icon"></Icon>
            <div class="ml-1 flex-1 min-w-0">
                <div class="text-primary font-bold cursor-pointer" @click="handleClick(item)">{{ item.label }}</div>
                <div class="line-clamp-3">{{ item.meta?.description }}</div>
            </div>
        </div>
        <div class="mt-auto">作者：<span class="text-gray-600">{{ item.meta?.author }}</span></div>
    </div>
</template>
<style lang="less" scoped></style>